10. Exercise: Add a TextView, ImageView, and Styling

Android Developer Documentation:

• ImageView

QUIZ QUESTION::

Match each term with its correct definition.

ANSWER CHOICES:

Now it’s your turn to complete this exercise.

You are going to do the following with AboutMe:

1. Add a TextView. Give it an id of name_text. Set the width to match_parent and the height to wrap_content. Add a top margin of 16dp and top padding of 8dp. Set the text to your name.
2. Style the TextView. Add the roboto font to your project and use it for the TextView. Set the text size to 20sp and change the text alignment to center.
3. Add the textColor to @android:color/black.
4. Create a style and extract all common resources as shown below.
5. Add an ImageView below the TextView. Choose the btn_star_big_on resource as the image. Set the id to star_image and set the width to match_parent and the height to wrap_content.
6. Get rid of the warning by adding a contentDescription; remember to extract it as a string resource.
7. Run your app.

Here is how your style and extracted dimensions should look.

<style name="NameStyle">
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textSize">@dimen/text_size</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
</style>

<resources>
   <dimen name="text_size">20sp</dimen>
   <dimen name="small_padding">8dp</dimen>
   <dimen name="layout_margin">16dp</dimen>
</resources>

If you want to start at this step, you can download this exercise code from: Step.02-Exercise-Add-TextView-ImageView-Style.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here: Step.02-Solution-Add-TextView-ImageView-Style, or using this git diff.